<template>
    <div class="saying">
        <h3>一共有{{total}}条语录</h3>
        <button @click="addSaying">添加一条语录</button>
        <ul>
            <li v-for="(saying,index) in sayingList" :key="index">{{saying}}</li>
        </ul>
    </div>
</template>
<script>
    import {mapState,mapGetters} from "vuex"
    export default {
        name:'Saying',
        computed: {
            ...mapState('saying',['sayingList']),
            ...mapGetters('saying',['total'])
        },
        methods:{
            addSaying(){
                this.$store.dispatch('saying/addSaying')
            }
        }
    }
</script>

<style scoped>
  .saying{
      background-color: pink;
      padding: 20px;
  }
</style>